<%@ page contentType="text/html;charset=UTF-8"%>

<style>
    a {
        color: rgba(255, 255, 255, 0.7);
    }
    .tree-hit, .tree-icon, .tree-indent {
        width:0px;
    }
    .tree-node, .tree-node-selected {
        height:35px;
    }
    .tree-node-selected {
        border-right:5px solid rgb(253, 65, 0);
        color: rgba(255, 255, 255, 1);
        background-color: #6d6d6d;
    }
    .tree-node-hover {
        height:35px;
        color: rgba(255, 255, 255, 0.7);
        background-color: #6d6d6d;
        /*
            background-color: #6d6d6d;
        */
    }

    .tree-title {
        font-size: 14px;
        /*padding: 0px 0px 0px 10px;*/
        height: 35px;
        width: 100%;
        line-height: 35px;
        /*color:#333;*/
    }

    .fa {
        font-size: 16px;
    }

    .azeroth-span {
        padding: 0px 0px 0px 5px;
        display: inline-block;
        height: 100%;
        /*width: 100%;*/
        text-decoration:none;
    }
    .treespan-second {
        display: inline-block;
        height: 100%;
        width: 100%;
        padding-left: 35px;
    }

    .azeroth-span:link {
        background-color: #393d49;
        color: rgba(255, 255, 255, 0.7);
        text-decoration:none;
    }
    .azeroth-span:hover {
        background-color:#6d6d6d;
        color: rgba(255, 255, 255, 1);
        text-decoration:none;
    }
</style>

<ul id="azeroth_tree"></ul>

<script>
    $('#azeroth_tree').tree({
        animate: true,
        url: "/sys/menu/menuLeft?_m=load",
        onClick: function(node){
            if(node.funType==1 && node.children==null) {
               return false;
            }

            if($(this).tree('isLeaf', node.target)) {
                $AzerothData.methods.addTabs(node.text, node.url, node.id);
                return false;
            }

            $(this).tree('collapseAll');
            if(node.state=="open") {
                return false;
            }
            $(this).tree('expand',node.target);
        },
        formatter:function(node){
            if(node.icon==null) {
                return "<a class='azeroth-span treespan-second'>"+node.text+"</a>";
            }
//            <i class='fa "+node.icon+"'></i>
            return "<a class='azeroth-span'>"+node.text+"</a>";
        }

    });

</script>